<template>
  <!-- 页脚 -->
  <footer class="bg-dark text-white pt-16 pb-8">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
        <div>
          <div class="flex items-center mb-4">
            <i class="fa fa-music text-primary text-2xl mr-2"></i>
            <span class="text-xl font-bold">初练音乐</span>
          </div>
          <p class="text-gray-400 mb-4">
            高品质数字乐谱销售平台，为音乐爱好者提供正版乐谱资源。
          </p>
          <div class="flex space-x-4">
            <a
              href="#"
              class="text-gray-400 hover:text-white transition-colors"
            >
              <i class="fa fa-weibo"></i>
            </a>
            <a
              href="#"
              class="text-gray-400 hover:text-white transition-colors"
            >
              <i class="fa fa-wechat"></i>
            </a>
            <a
              href="#"
              class="text-gray-400 hover:text-white transition-colors"
            >
              <i class="fa fa-instagram"></i>
            </a>
            <a
              href="#"
              class="text-gray-400 hover:text-white transition-colors"
            >
              <i class="fa fa-youtube-play"></i>
            </a>
          </div>
        </div>

        <div>
          <h4 class="text-lg font-semibold mb-4">快速链接</h4>
          <ul class="space-y-2">
            <li
              ><a
                href="#"
                class="text-gray-400 hover:text-white transition-colors"
                >首页</a
              ></li
            >
            <li
              ><a
                href="#categories"
                class="text-gray-400 hover:text-white transition-colors"
                >乐谱分类</a
              ></li
            >
            <li
              ><a
                href="#featured"
                class="text-gray-400 hover:text-white transition-colors"
                >热门推荐</a
              ></li
            >
            <li
              ><a
                href="#about"
                class="text-gray-400 hover:text-white transition-colors"
                >关于我们</a
              ></li
            >
            <li
              ><a
                href="#"
                class="text-gray-400 hover:text-white transition-colors"
                >联系我们</a
              ></li
            >
          </ul>
        </div>

        <div>
          <h4 class="text-lg font-semibold mb-4">帮助中心</h4>
          <ul class="space-y-2">
            <li
              ><a
                href="#"
                class="text-gray-400 hover:text-white transition-colors"
                >常见问题</a
              ></li
            >
            <li
              ><a
                href="#"
                class="text-gray-400 hover:text-white transition-colors"
                >下载说明</a
              ></li
            >
            <li
              ><a
                href="#"
                class="text-gray-400 hover:text-white transition-colors"
                >购买指南</a
              ></li
            >
            <li
              ><a
                href="#"
                class="text-gray-400 hover:text-white transition-colors"
                >退款政策</a
              ></li
            >
            <li
              ><a
                href="#"
                class="text-gray-400 hover:text-white transition-colors"
                >用户协议</a
              ></li
            >
          </ul>
        </div>

        <div>
          <h4 class="text-lg font-semibold mb-4">联系我们</h4>
          <ul class="space-y-2">
            <li class="flex items-start">
              <i class="fa fa-map-marker text-primary mt-1 mr-3"></i>
              <span class="text-gray-400">北京市朝阳区音乐大厦15层</span>
            </li>
            <li class="flex items-center">
              <i class="fa fa-phone text-primary mr-3"></i>
              <span class="text-gray-400">400-123-4567</span>
            </li>
            <li class="flex items-center">
              <i class="fa fa-envelope text-primary mr-3"></i>
              <span class="text-gray-400">contact@yuepu.com</span>
            </li>
            <li class="flex items-center">
              <i class="fa fa-clock-o text-primary mr-3"></i>
              <span class="text-gray-400">周一至周日 9:00-21:00</span>
            </li>
          </ul>
        </div>
      </div>

      <div class="border-t border-gray-800 pt-8">
        <div class="flex flex-col md:flex-row justify-between items-center">
          <p class="text-gray-500 text-sm">
            &copy; 2025 初练音乐. 保留所有权利.
          </p>
          <!-- <div class="mt-4 md:mt-0">
            <img
              src="https://picsum.photos/400/100?random=80"
              alt="支付方式"
              class="h-8"
            />
          </div> -->
        </div>
      </div>
    </div>
  </footer>
</template>

<style lang="less" scoped></style>
